import React, { PureComponent,Fragment } from "react";
import moment from "moment";
import { connect } from "dva";
import { Row, Col, Upload, Spin ,Card} from "antd";
import DescriptionList from '../../../components/DescriptionList';
import styles from '../../Pbulic.less';

const { Description } = DescriptionList;

@connect(({point, global}) => ({
  dictionaries:global.dictionaries,
  baseUrl:global.baseUrl,
  detaildata:point.detaildata,
  loading:point.loading.detailinfo,
}))
export default class DetailInfo extends PureComponent {
  constructor(props) {
    super(props);
    this.detailInfoId = this.props.match.params.id && this.props.match.params.id!='detail' ? this.props.match.params.id : 0;
    //console.log(this.detailInfoId);
  }

  componentDidMount() {
    const { detailInfoId, dispatch} = this.props;
    console.log(detailInfoId);
    dispatch({
      type: "point/fetch_point_info", 
      payload: {
        pointId: this.detailInfoId
      }
    });
  }




  render() {
    const { detaildata,loading, dictionaries, baseUrl  } = this.props;

    const pointType = dictionaries.pointType && dictionaries.pointType.length>0
      ? dictionaries.pointType.map(item=>item.label)
      :[];

    return (
      <Fragment>
        {loading && <div className={"globalSpin"}><Spin spinning={loading}  /></div>}
        {
          !loading && detaildata && detaildata.maintenanceId &&
          <Card >
            <Row gutter={24}>
            <Col span={24}>
          <DescriptionList size="large" style={{ marginBottom: 32 }}>
            <Description term="点位编号">{detaildata.pointCode}</Description>
            <Description term="点位名称">{detaildata.pointName}</Description>
            <Description term="点位类型">{detaildata.pointType && pointType[parseInt(detaildata.pointType)-1]}</Description>
            <Description term="所属区域">{detaildata.districtName}</Description>
            <Description term="x坐标">{detaildata.latitude}</Description>
            <Description term="y坐标">{detaildata.longitude}</Description>
            <Description term="维保单位">{detaildata.maintenanceName}</Description>
            <Description term="运营商">{detaildata.operatorInfoName}</Description>
            <Description term="质保期">{detaildata.qualityBeginTime && detaildata.qualityEndTime && `${moment(detaildata.qualityBeginTime).format("YYYY-MM-DD")} 至 ${moment(detaildata.qualityEndTime).format("YYYY-MM-DD")}`}</Description>
            <Description term="备注">{detaildata.remarks}</Description>
          </DescriptionList>
          </Col>
          </Row>
          </Card>

        }
      </Fragment>
    );
  }
}
